<template>
	<view class="list" :style="{background: bgColor}">
		<view class="title">
			uniapp生态
		</view>
		<swiper
			autoplay
			circular
			disable-touch
			:display-multiple-items="5"
			:duration="2200"
			easing-function="linear"
			:indicator-dots="false"
			:interval="2200"
			next-margin="10rpx"
			:style="{height: imageSize, width: width}"
		>
			<swiper-item :key="index" v-for="(item, index) in list">
				<image
					mode="widthFix"
					:src="item"
					:style="{width: imageSize, height: imageSize}"
				/>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	props: {
		bgColor: {
			type: String,
			default: '#fff'
		},
		width: {
			type: String,
			default: '100%'
		},
		imageSize: {
			type: String,
			default: '110rpx'
		}
	},
	data() {
		return {
			list: [
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/11.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/10.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/12.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/6.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/4.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/11.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/10.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/12.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/6.jpg',
				'https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/4.jpg'
			]
		}
	},
}
</script>

<style lang="scss" scoped>
	.list {
		border-radius: 24rpx;
		border: 2rpx solid #eee;
		padding: 0 0 20rpx;
		margin: 0 auto;
		position: relative;
		z-index: 6;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		.title {
			text-align: center;
			margin: 20rpx auto 20rpx;
		}
	}
</style>